<template>
  <div class="quickBox">
    <div class="row">
      快捷键：
    </div>
    <div v-for="(item, index) in quick" :key="index" class="quick-item">
      <span>{{ item.title }}</span>
      <i>{{ item.name }}</i>
    </div>
  </div>
</template>

<script>
import { quickArr } from './QuickCode.js'
export default {
  name: 'Quick',
  data() {
    return {
      quick: quickArr
    }
  }
}
</script>

<style scoped lang="scss">
.quickBox {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  .row {
    width: 100%;
  }
  .quick-item {
    margin-right: 15px;
    margin-top: 15px;
    span {
      margin: 0 0.2em;
      padding: 0.15em 0.4em 0.1em;
      font-size: 90%;
      background: hsla(0, 0%, 58.8%, 0.06);
      border: solid hsla(0, 0%, 39.2%, 0.2);
      border-width: 1px 1px 2px;
      border-radius: 3px;
    }
    i {
      font-style: normal;
    }
  }
}
</style>
